<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <th:block th:include="public::common-script"></th:block>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <style>
        th {
            text-align: center !important;
        }</style>
</head>


<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">行政管理</a></li>
        <li><a href="#">学生管理</a></li>
    </ul>
</div>

<div class="rightinfo">

    <div class="tools">

        <ul class="toolbar">
            <li onclick="add()"><span><img th:src="@{/images/t01.png}"/></span>添加</li>
        </ul>


    </div>


    <table class="tablelist" style="text-align: center;">
        <thead>
        <tr>
            <th><input name="" type="checkbox" value=""/></th>
            <th>编号<i class="sort"><img th:src="@{/images/px.gif}"/></i></th>
            <th>姓名</th>
            <th>性别</th>
            <th>身份证号</th>
            <th>年级</th>
            <th>班级</th>
            <th>文理科</th>
            <th>入学年份</th>
            <th>班主任</th>
            <th>班主任电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${studentPage.toList().size()==0}">
            <td colspan="12">暂无数据</td>
        </tr>
        <tr th:if="${studentPage.toList().size()!=0}" th:each="student:${studentPage.toList()}">
            <td><input name="" type="checkbox" value=""/></td>
            <td th:text="${student.id}"></td>
            <td th:text="${student.name}"></td>
            <td th:text="${student.gender}"></td>
            <td th:text="${student.card}"></td>
            <td>
                <script type="text/javascript" th:inline="javascript">
                    var fullYear = new Date().getFullYear();
                    var inYear = [[${student.clazz.created}]]
                    if (inYear == fullYear) {
                        document.write("高一")
                    } else if (inYear == fullYear - 1) {
                        document.write("高二")

                    } else if (inYear == fullYear - 2) {
                        document.write("高二")

                    }else {
                        document.write("已毕业")
                    }


                </script>
            </td>
            <td th:text="${student.clazz.name}"></td>
            <td>
                <span th:if="${student.clazz.type==0}">文科</span>
                <span th:if="${student.clazz.type==1}">理科</span>
                <span th:if="${student.clazz.type==2}">其他</span>
            </td>
            <td th:text="${student.clazz.created}"></td>
            <td th:text="${student.clazz.leader.name}"></td>
            <td th:text="${student.clazz.leader.loginName}"></td>
            <td>
                <a href="javascript:;" class="tablelink" th:onclick="|javascript:update(${student.id})|">修改</a>
                <a href="javascript:;" class="tablelink" th:onclick="|javascript:del(${student.id})|"> 删除</a>
            </td>
        </tr>
        </tbody>
    </table>


    <div th:if="${studentPage.toList().size()!=0}" class="pagin">
        <div class="message">共 <i class="blue" th:text="${studentPage.totalElements}"></i> 条记录，
            当前显示第&nbsp;<i class="blue" th:text="${studentPage.number+1}"></i> 页，
            共 <i class="blue" th:text="${studentPage.totalPages}"></i> 页

        </div>
        <ul class="paginList">
            <a class="ibtn" href="javascript:;" onclick="go(-1)">上一页</a>
            <a class="ibtn" href="javascript:;" onclick="go(1)">下一页</a>
        </ul>
        <script type="text/javascript" th:inline="javascript">
            function go(i) {
                var currentPage, pageSize = 10
                var hasNext = Boolean([[${studentPage.hasNext()}]])
                if (i < 0) {
                    currentPage = [[${studentPage.number+1}]]
                    if (currentPage != 1) {
                        currentPage--
                    }
                } else {
                    if (hasNext) {
                        console.log("--")
                        currentPage = [[${studentPage.number+1+1}]]
                    } else {
                        currentPage = [[${studentPage.number+1}]]
                    }
                }
                window.open("/student/list?currentPage=" + currentPage + "&pageSize=" + pageSize, "rightFrame")
            }
        </script>
    </div>


    <div class="tip">
        <div class="tiptop"><span>提示信息</span><a></a></div>

        <div class="tipinfo">
            <span><img th:src="@{/images/ticon.png}"/></span>
            <div class="tipright">
                <p>是否确认对信息的修改 ？</p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
            </div>
        </div>

        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消"/>
        </div>

    </div>


</div>

<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
<script type="text/javascript">
    function add() {
        //iframe层
        layer.open({
            type: 2,
            title: '添加学生',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '95%'],
            content: '/student/add' //iframe的url
        });
    }

    function update(id) {
        //iframe层
        layer.open({
            type: 2,
            title: '编辑学生',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '95%'],
            content: '/student/edit/' + id //iframe的url
        });
    }

    function del(id) {
        layer.confirm('您是确定要删除？该操作会删除该学生的所有记录！', {
            btn: ['确定', '取消'], //按钮
            icon: 0
        }, function () {
            $.get("/api/deleteStudent?id=" + id, function (resp) {
                if (resp.code == 200) {
                    layer.msg('删除成功', {icon: 1});
                    setTimeout(function () {
                        location.reload()
                    }, 3000)
                } else {
                    layer.msg('删除失败', {icon: 2});
                }
            })
        });
    }
</script>

</body>

</html>
